<!--
 * @Author: 273198238 2412069378@qq.com
 * @Date: 2025-03-15 09:47:02
 * @LastEditors: 273198238 2412069378@qq.com
 * @LastEditTime: 2025-03-16 16:48:27
 * @FilePath: \population\src\components\Hander.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%B
-->
<template>
    <div>
            <h1>北上广深人口流入涌出统计</h1>
    <div class="hander">
        <div class="beijing" v-for="(item, index) in populationData" :key="index">
            <ul>
                <li>{{ item.name }}</li>
                <li>涌入人数:{{ item.inflow }}</li>
                <li>流失人数:{{ item.outflow }}</li>
            </ul>
        </div>
    </div>
</div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
    data() {
        return {
            
           
        }
    },
    mounted() {
       
            // this.population();
        
    },
    methods: {
        // ...mapActions(['updatePopulation']),
        // population() {
        //     this.updatePopulation();
        // }
       
    },
    computed: {
        ...mapState(['populationData'])
    }

}
</script>

<style lang="less" scoped>
h1{
    width: 390px;
    color: #fff;
    margin: 0px auto;

}
.hander {
    display: flex;
    justify-content: space-between;
}

.beijing {
    width: 30vw;
    min-width: 13vw;
    height: 120px;
    border-radius: 5px;
    background-color:rgba(255, 255, 255, 0.1);
    box-shadow: 3px -2px 6px 2px #4b5b8c;
    // margin: 0px 100px;
    border: 1px solid #fff;

    ul {
        list-style: none;
        color: #fff;

        li {
            font-size: 16px;
            color: #fff;
            margin-top: 5px;
        }

        li:nth-child(1) {
            font-size: 20px;
            font-weight: bold;
        }
       
    }

}
.beijing:nth-child(2){
    // background-color: #fff;
    margin-right: 250px !important;
}
.beijing:nth-child(3)
{
    margin-left: 250px !important;

}
</style>